<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        body {
            background: #3e3e3e;
        }

        div {
            position: absolute;
            width: 100px;
            height: 100px;
            cursor: move;
            border: 1px solid #888;
            background: #0ff
        }

        #drag1 {
            top: 100px;
            left: 100px;
        }

        #drag2 {
            top: 100px;
            left: 400px;
        }

        #temp {
            opacity: 0.3;
        }
    </style>
</head>

<body>
    <div id="drag1"></div>
    <div id="drag2"></div>
</body>
<script type="text/javascript">
    // BOM全局变量
    var zIndex = 1;
    window.onload = function () {
        var oDrag1 = document.getElementById("drag1");
        var oDrag2 = document.getElementById("drag2");
        drag(oDrag1);
        drag(oDrag2);

        function drag(oDrag) {
          
            var disX = 0,
                disY = 0;
            oDrag.onmousedown = function (event) {
                var event = event || window.event;
                // 设置鼠标点击处相对盒子的位置
                disX = event.clientX - this.offsetLeft;
                disY = event.clientY - this.offsetTop;
                // 鼠标点击后创建div
                var oTemp = document.createElement("div");
                oTemp["id"] = "temp";

                // 获取样式的兼容:ie和非ie
                oTemp.style.left = this.currentStyle ? this.currentStyle["left"] : getComputedStyle(this, null)[
                    "left"];
                oTemp.style.top = this.currentStyle ? this.currentStyle["top"] : getComputedStyle(this, null)[
                    "top"];

                oTemp.style.zIndex = zIndex++;
                document.body.appendChild(oTemp);

                document.onmousemove = function (event) {
                    var event = event || window.event;
                    var iL = event.clientX - disX;
                    var iT = event.clientY - disY;

                    var maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
                    var maxT = document.documentElement.clientHeight - oDrag.offsetHeight;

                    iL <= 0 && (iL = 0);
                    iT <= 0 && (iT = 0);
                    iL >= maxL && (iL = maxL);
                    iT >= maxT && (iT = maxT);

                    oTemp.style.left = iL + "px";
                    oTemp.style.top = iT + "px";

                    return false;
                };

                document.onmouseup = function (event) {
                    document.onmouseup = null;
                    document.onmousemove = null;
                    // 复制临时盒子的样式
                    oDrag.style.left = oTemp.style.left;
                    oDrag.style.top = oTemp.style.top;
                    oDrag.style.zIndex = oTemp.style.zIndex;

                    // 复制完成后，需要将临时盒子移除
                    document.body.removeChild(oTemp);

                    // 可以不用，主要是为了兼容ie8以下
                    oDrag.releaseCpature && oDrag.releaseCpature();
                }
                this.setCapture && this.setCpature();

                return false;
            };
        }
    }
</script>

</html>